<template>
  <div class="containet">
    <div class="ticket border-bottom" v-for="(items, index) of ticketList" :key="index" v-show="more(index)">
      <div class="ticket-content">
        <div class="ticket-title">{{items.title}}</div>
        <div class="ticket-icon"><img class="icon" src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" />可定明日</div>
        <div class="tag">
          <div class="border" v-for="(item, index) of items.tag" :key="index">
            <img v-if="item.icon" :src="item.icon" />
            {{item.content}}
          </div>
        </div>
        <div class="ticket-info">
          <div>{{items.category}}</div>
          <div class="border-left">预定须知 ></div>
        </div>
      </div>
      <div class="ticket-price">
        <strong class="price">
          ￥<em class="price-content">{{items.price}}</em>
        </strong>
        <div class="ticket-btn">预定</div>
      </div>
    </div>
    <div v-if="moreShow" @click="handleMoreClick" class="ticket-more border-bottom">
      查看更多报价
      <span class="iconfont more-icon">&#xe624;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListTicket',
  props: {
    ticketList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      moreList: false
    }
  },
  computed: {
    moreShow () {
      if (!this.moreList) {
        return this.ticketList.length >= 3 ? 1 : 0
      } else {
        return false
      }
    }
  },
  methods: {
    more (index) {
      if (!this.moreList) {
        return index >= 3 ? 0 : 1
      } else {
        return true
      }
    },
    handleMoreClick () {
      this.moreList = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .border
    &:before
      border-color #a5e4ec
      border-radius .08rem
  .border-left
    padding-left .08rem
    &:before
      border-color #bdbdbd
      height .22rem
      top .04rem
  .border-bottom
    &:before
      border-color #dadada
  .ticket
    padding .2rem
    display flex
    flex-direction row
    justify-content space-between
    .ticket-content
      display flex
      flex-direction column
      .ticket-title
        font-size .28rem
        color #616161
        line-height .4rem
      .ticket-icon
        height .32rem
        display inline-block
        color #616161
        font-size .24rem
        line-height .32rem
        white-space nowrap
        .icon
          width .2rem
          display inline-block
          max-height .32rem
          vertical-align 0
          margin-right .04rem
      .tag
        div
          display inline-block
          margin .08rem .1rem 0 0
          padding 0 .04rem
          color #00afc7
          height .32rem
          font-size .2rem
          line-height .32rem
          white-space nowrap
          img
            width .2rem
            display inline-block
            max-height .32rem
            vertical-align 0
            margin-right .04rem
      .ticket-info
        display flex
        flex-direction row
        margin-top .08rem
        font-size .24rem
        color #616161
        line-height .34rem
        div
          margin-right .08rem
    .ticket-price
      display flex
      flex-direction column
      align-items center
      justify-content center
      padding-left .2rem
      .price
        color #ff9800
        height .4rem
        .price-content
          font-size .4rem
          line-height .4rem
          margin-left .04rem
      .ticket-btn
        height .6rem
        width 1.6rem
        color #ffffff
        font-size .28rem
        line-height .6rem
        border-radius .08rem
        background-image linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%)
        text-align center
  .ticket-more
    height .8rem
    background #fff
    color #616161
    line-height .8rem
    text-align center
    display flex
    flex-direction row
    justify-content center
    .more-icon
      color #9e9e9e
      font-size .24rem
      margin-left .1rem
      transform rotate(270deg)
</style>
